<template>
  <!-- 申请管理 -->
  <div>
    <el-card>
      <TableBar :layout="layout" :columns="columns">
        <el-row slot="bottom" :gutter="10" type="flex">
          <el-col :span="7"
            ><el-button
              type="danger"
              size="small"
              plain
              @click="deleteBatchEvent"
              v-auth="'breed_input_access_delete'"
              >批量删除</el-button
            ></el-col
          >
          <el-col :span="9">
            <el-select
              v-model="applicationType"
              size="small"
              placeholder="请选择类型"
              @change="getTableData"
              v-auth="'breed_input_access_select'"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </TableBar>
    </el-card>
    <Table
      :page.sync="page"
      :showPage="showPage"
      @selectData="selectData"
      :data="tableData"
      :columns="columns"
      ref="tableRef"
      @changeSize="
        (size) => {
          this.page.pageSize = size.pageSize;
          this.getTableData();
        }
      "
      @changePage="
        (page) => {
          this.page.current = page.current;
          this.getTableData();
        }
      "
    >
      <div
        v-for="(item, index) in columns"
        :key="index"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          type="selection"
          v-if="index === 0"
          effect="dark"
          fixed="left"
          placement="top-start"
          class="item"
        >
        </el-table-column>
        <el-table-column
          label="投入品照片"
          width="145"
          v-if="columns[11].show && index === 1"
        >
          <template slot-scope="scope">
            <img class="supplyPic" :src="scope.row.picture">
          </template>
        </el-table-column>
        <el-table-column
          :label="item.name"
          align="center"
          v-if="item.show && index != 10 && index != 11"
          :prop="item.prop"
          width="145"
          show-overflow-tooltip
        ></el-table-column>
      </div>
      <el-table-column
        label="申请状态"
        v-if="columns[10].show"
        width="180"
        :prop="columns[10].applicationType"
      >
        <template slot-scope="scope">
          <el-tag>{{
            scope.row.status === 1
              ? "已批准"
              : scope.row.status === 2
              ? "不批准"
              : scope.row.status === 3
              ? "未处理"
              : "已发送"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230" fixed="right">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="批阅申请"
            placement="top-start"
          >
            <el-button
              :disabled="scope.row.status !=0"
              type="success"
              class="el-icon-s-promotion"
              size="mini"
              v-auth="'breed_input_access_insert'"
              @click="approvalEvent(scope.row.id)"
              >审批</el-button
            ></el-tooltip
          >
          <el-button
            type="danger"
            class="el-icon-delete-solid"
            :disabled="scope.row.status === 0 || scope.row.status === 3"
            size="mini"
            v-auth="'breed_input_access_delete'"
            @click="deleteEvent(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </Table>
    <el-dialog title="审批申请" :visible.sync="dialogVisible" width="29%">
      <el-form label-width="110px">
        <el-form-item label="审批结果">
          <el-select v-model="approvalStatus" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="applicationApproval">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import {
  getApplicationManageByPage,
  getApplicationManageDetail,
  deleteApplicationManage,
  deleteApplicationManageBatch,
  reviewManagement,
} from "../../../Api/productionmanage/applicantAndManage";
import Table from "../../common/TheTable";
export default {
  components: {
    Table,
  },
  data() {
    return {
      layout: "search, refresh, column",
      selectList: [],
      tableData: [],
      applicationType: 1,
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      columns: [
        { name: "申请人", show: true, prop: "applicant" },
        { name: "供应商", show: true, prop: "supplier" },
        { name: "投入品名称", show: true, prop: "supplyName" },
        { name: "基地名称", show: false, prop: "baseName" },
        { name: "仓库名称", show: false, prop: "warehouseName" },
        { name: "投入品供应商", show: false, prop: "supplier" },
        { name: "投入品规格", show: false, prop: "specification" },
        { name: "操作时间", show: false, prop: "operationTime" },
        { name: "购买时间", show: false, prop: "purchaseTime" },
        { name: "备注", show: true, prop: "remarks" },
        { name: "申请状态", show: true, prop: "applicationType" },
        { name: "投入品照片", show: true, prop: "picture" },
      ],
      options: [
        {
          value: 1,
          name: "批准",
        },
        {
          value: 2,
          name: "不批准",
        },
      ],
      dialogVisible: false,
      statusID: "",
      showPage: true,
      approvalStatus: "",
    };
  },
  computed: {
    ...mapState({
      staffInfoList: (state) => state.roleInfo.staffInfo, //企业所有角色信息
      ShopSupplyInfo: (state) => state.productionInfo.ShopSupplyInfo,
      baseList: (state) => state.productionInfo.baseInfoList, //企业基地
      specificationList: (state) => state.productionInfo.specificationList,
      typeList: (state) => state.productionInfo.typeList,
    }),
  },
  created() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      const { data: res } = await getApplicationManageByPage(
        this.applicationType,
        this.page.pageSize,
        this.page.current
      );
      console.log(res);
      this.tableData = res.data.records;
      this.page.total = res.data.total;
    },
    async deleteBatchEvent() {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选内容, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const {data: res} = await deleteApplicationManageBatch(this.selectList);
      if(res.statusCode === 20000){
        this.$message.success('删除成功');
      }
    },
    //获取所要删除的投入品
    selectData(list) {
      this.selectList.push(
        list.map((list) => {
          return list.id;
        })
      );
    },
    approvalEvent(id) {
      this.dialogVisible = true;
      this.statusID = id;
    },
    async applicationApproval() {
      const { data: res } = await reviewManagement(
        this.statusID,
        this.approvalStatus
      );
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("修改成功");
        this.dialogVisible = false;
        this.getTableData();
      }
    },
    async deleteEvent() {
      console.log(id);
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选内容, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteApplicationManage(id);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.getTableData();
      }
    },
  },
};
</script>

<style>
.supplyPic {
  width: 100%;
  height: 110px;
}
</style>